<template>
  <div class="TabModule">
    <div class="TabModule--tablist">
      <div class="TabModule--tablist__item" :class="{ active: activeName === item.name }" v-for="(item, index) in tablist" :key="item.name" @click="changeTab(item, index)">
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
const props = defineProps({
  tablist: {
    type: Array,
    default() {
      return [
        // {
        //   name: '公交线网密度分析'
        // },
        // {
        //   name: '线路重复系数分析'
        // },
        // {
        //   name: '公交站点 500m 覆盖率分析'
        // },
      ]
    }
  },
  active: {
    type: String,
    default: ''
  }
})

const $emit = defineEmits(['change'])

const activeName = ref('')
/* ********** watch ************* */
watch(() => props.active, () => {
  activeName.value = props.active
  const activeItemArr = props.tablist.filter(item => {
    return item.name === props.active
  })
  changeTab(activeItemArr[0])
}, {
  immediate: true
})
/* ********** 生命周期 ************* */
onMounted(() => {
  if (!props.active) { // 如果没有选中tab，默认就是第一个
    activeName.value = props.tablist[0].name
    changeTab(props.tablist[0])
  }
})
/* ********** method ************* */
function changeTab(item) {
  activeName.value = item.name
  $emit('change', item)
}

</script>

<style scoped lang="scss">
.TabModule {
  background-color: #fff;

  &--tablist {
    height: 56px;
    line-height: 56px;
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);

    &__item {
      padding: 0 16px;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.9);
      text-align: center;
      cursor: pointer;

      &.active {
        color: #2080F7;
        position: relative;

        span {
          position: relative;

          &::after {
            content: "";
            display: inline-block;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -18px;
            border-bottom: 2px solid #2080F7;
          }
        }
      }
    }
  }
}
</style>